<template>
  <div class="container">
    <el-card class="box-card loginPosition" style="width: 380px">
      <div slot="header" class="clearfix myheader" style="padding: 5px auto">
        <div class="title" style="text-align: center; font-size: 20px; color: #E6A23C; font-weight: 700">登录</div>
      </div>
      <!-- 用户名 -->
      <div class="text item demo-input-size top-distance-small">
        <el-input placeholder="请输入用戶名" 
          v-model="username" 
          size="large"
          clearable maxlength="10"
          show-word-limit style="width: 90%"
          prefix-icon="el-icon-user-solid">
         </el-input>
      </div>
      <!-- 密码 -->
      <div class="text item password-item demo-input-size">
        <el-input placeholder="请输入密码"
          v-model="password"
          show-password
          maxlength="50" show-word-limit style="width: 90%"
          prefix-icon="el-icon-unlock">
        </el-input>
      </div>
      <!-- 链接 -->
      <div>
        <el-link type="primary" class="regist" href="/register">前往注册</el-link>
        <el-link type="success" class="forget" href="/email">忘了密码?</el-link>
      </div>
      <!-- 登录 -->
      <div class="item">
        <el-button type="primary" :loading="loading" round @click="login" class="loginStyle">登录</el-button>
      </div>
      <el-divider class="top-distance-medium"><span class="otherText">社交账号登录</span></el-divider>
      <!-- 社交账号登录 -->
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6">
          <div class="otherWay" @click="loginByQQ">
            <svg t="1627799830708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3286" width="35" height="35"><path d="M511.999 1024a512 512 0 1 0-512-512 512 512 0 0 0 512 512z" fill="#23A0F0" p-id="3287"></path><path d="M735.765 604.422c-3.55-49.47-36.192-90.932-55.09-112.47a70.383 70.383 0 0 0-15.577-67.003v-1.718c0-97.235-68.028-167.254-153.35-167.55-85.333 0.342-153.35 70.315-153.35 167.55v1.718a70.383 70.383 0 0 0-15.576 67.003c-18.898 21.413-51.54 62.874-55.09 112.47a75.39 75.39 0 0 0 7.554 40.425c7.555 10.308 28.513-2.06 43.406-34.93a210.33 210.33 0 0 0 35.499 67.914c-36.307 8.477-46.729 44.897-34.475 64.853 8.59 14.086 28.445 25.657 62.419 25.657 60.473 0 87.267-16.611 99.18-28.057a16.259 16.259 0 0 1 20.844 0c11.913 11.57 38.684 28.057 99.18 28.057 34.02 0 53.715-11.57 62.419-25.657 12.253-19.922 1.831-56.342-34.475-64.853a211.627 211.627 0 0 0 35.499-67.914c14.893 32.87 35.85 45.124 43.406 34.93a76.493 76.493 0 0 0 7.577-40.425z" fill="#FFFFFF" p-id="3288"></path></svg>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="otherWay" @click="loginByWeChat">
            <svg t="1627799909660" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4116" width="40" height="40"><path d="M544.059897 959.266898h-64.949141c-228.633593 0-415.697442-187.063849-415.697442-415.697442v-64.949141c0-228.633593 187.063849-415.697442 415.697442-415.697442h64.949141c228.633593 0 415.697442 187.063849 415.697442 415.697442v64.949141C959.756315 772.203049 772.692466 959.266898 544.059897 959.266898z" fill="#2DC100" p-id="4117"></path><path d="M618.871102 424.812069c-52.6789 2.760395-98.49572 18.754507-135.696546 54.89766-37.587854 36.50356-54.743053 81.262707-50.047514 136.728622-20.586238-2.580191-39.34177-5.366183-58.19969-6.965492-6.552866-0.516038-14.292415 0.258019-19.786584 3.353224-18.316285 10.318716-35.858512 22.030941-56.703793 35.085479 3.818068-17.284208 6.294847-32.505287 10.680148-47.029101 3.173021-10.732366 1.702721-16.691379-8.152175-23.65687-63.256659-44.73355-89.905323-111.652647-69.963108-180.584703 18.470891-63.720479 63.798295-102.417201 125.376806-122.539619 84.100917-27.500536 178.52055 0.567232 229.651335 67.409538 18.733006 24.012159 30.112467 52.935895 32.763306 83.275665L618.871102 424.812069zM737.231222 753.7854c-16.691379-7.429312-31.989249-18.574304-48.241381-20.302622-16.252132-1.702721-33.330539 7.687331-50.305534 9.416673-51.724639 5.288368-98.0319-9.132033-136.263778-44.526725-72.646712-67.331723-62.275777-170.522981 21.799542-225.730878 74.736462-49.015438 184.324956-32.659894 237.003856 35.342474 45.971427 59.386373 40.55405 138.198922-15.55589 188.066232-16.252132 14.447022-22.108756 26.313853-11.686627 45.32638 1.909546 3.508855 2.140944 7.94535 3.250836 12.382869L737.231222 753.7854zM376.397651 403.348361c0.516038-12.640888-10.422129-23.991681-23.373254-24.353112-13.025869-0.533444-24.017278 9.593805-24.550722 22.619674-0.003072 0.078839-0.006143 0.158702-0.008191 0.237542-0.512967 12.869215 9.503704 23.719327 22.372918 24.232294 0.238565 0.009215 0.477131 0.015358 0.715696 0.017406C364.663926 426.584415 375.730078 416.448974 376.397651 403.348361zM502.909946 378.995249c-13.00232 0.258019-23.991681 11.350793-23.733662 23.99168 0.280545 13.104708 11.131681 23.50124 24.23639 23.220696 0.038908-0.001024 0.077815-0.002048 0.116723-0.003072 12.865119 0.104436 23.379398-10.239877 23.483834-23.104996 0.002048-0.278497 0-0.556994-0.008192-0.835491-0.109556-12.96546-10.708817-23.386565-23.673252-23.277009C503.191515 378.989105 503.050218 378.991153 502.909946 378.995249zM547.334283 569.640648c10.628954 0 19.348361-8.332379 19.760986-18.832323 0.384981-10.920761-8.15627-20.086582-19.077031-20.471563-0.176108-0.006143-0.352217-0.010239-0.529349-0.011262-11.041579 0.069624-19.937095 9.076743-19.867471 20.118322 0.001024 0.08703 0.002048 0.175084 0.003072 0.262115C528.092406 561.263219 536.764714 569.595597 547.334283 569.640648zM669.743869 530.351097c-10.452845 0.086006-19.011503 8.337498-19.477371 18.781128-0.570304 10.670933 7.617707 19.782488 18.28864 20.352793 0.310237 0.016382 0.620475 0.025597 0.930712 0.027645 10.654551 0 19.090342-8.07436 19.47737-18.703314 0.528325-10.772298-7.776409-19.934023-18.548706-20.462348-0.223207-0.011263-0.447438-0.01843-0.670645-0.021501V530.351097z" fill="#FFFFFF" p-id="4118"></path></svg>
          </div>
        </el-col>
      </el-row>
    </el-card>
</div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: "",
      password: "",
      loading: false,
      isLoging: false
    }
  },
  methods: {
      loginByQQ: function(){  //QQ登录
        this.$message({
          // showClose: true,
          message: 'QQ登录暂未开启，尽敬请期待',
          type: 'warning'
        });
      },
      loginByWeChat: function(){  //微信登录
        this.$message({
          // showClose: true,
          message: '微信登录暂未开启，尽敬请期待',
          type: 'warning'
        });
      },
      login: function(){  //登录方法
        this.loading = true;
        if(this.username == '') {
          this.$message.error('请输入用户名');
          this.loading = false;
          return;
        }else if(this.password == '') {
          this.$message.error('请输入密码');
          this.loading = false;
          return;
        }
        this.axios({
            url: '/login',   
            method: 'post',      
            data: {              
            username: this.username,
            password: this.password
            }
        }).then(res=>{  
            this.isLoging = true;
            this.loading = false; 
            let data = res.data;       
            if(data.success) {
                this.$message({
                  message: '登录成功',
                  type: 'success'
                });
                //将需要的权限等信息存入session
                this.$session.set("role",data.role);
                this.$session.set(this.username+"isLogin",true);
                this.$session.set("username",this.username);
                console.log("role    " +  this.$session.get("role"));
                console.log("isLogin    " +  this.$session.get(this.username+"isLogin"));
                this.$emit('confirm',this.isLoging)
                // this.$router.replace({path: '/'});  //跳转到首页
            }else {
                this.password = '';
                if(data.error != null) {
                  this.$message.error(data.error);
                }else if(data.message != null) {
                  this.$message.error(data.message);
                }
                
            }
        }).catch(()=>{     
          this.loading = false;     
          this.$message.error('请求发送失败');
        })

      }
  }
}
</script>
 
<style>
 .container {
    position: relative;
    width: 400px;
    text-align:center;
    margin:10% auto;
  }

  .loginPosition {
    position: absolute;
    margin-left: 10%;
  }

 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 20px;
  }

  .password-item {
    margin-bottom: 10px !important;
  }

  .regist {
    right: 27%
  }

  .forget {
    left: 28%
  }

  .loginStyle {
    width: 300px;
    margin-top: 20px !important;
  }

  .top-distance-medium {
    margin-top: 40px !important;
  }

  .top-distance-small {
    margin-top: 10px !important;
  }

  .otherWay {
    width: auto;
    height: auto;
  }

  .otherWay:hover {
    cursor: pointer;
  }

  .otherText {
    height: 13px !important;
    font-size: 12px !important;
    color: #b5b5b5 !important;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
